<template>
  <div class="app-container">
    <div>
      <el-row :gutter="10">
        <el-col :span="6" :xs="24" :lg="24">
          <div class="bgwhite plr20 ptb20 radius10 flex-col">
            <div class="justify-between w100p">
              <div class="clr3c4 bold ft26">新增</div>
              <div class="clr9fa align-center pointer" @click="back()">
                <el-icon>
                  <Back />
                </el-icon>
                返回上一頁
              </div>
            </div>
            <div class="mt40">
              <el-form :label-position="labelPosition" label-width="auto" :model="formLabelAlign" style="max-width: 600px">
                <el-form-item label="角色名称:" required>
                  <el-input v-model="formLabelAlign.name" style="width: 380px;" placeholder="請輸入角色名稱" />
                </el-form-item>
                <el-form-item label="标志:" required>
                  <el-input v-model="formLabelAlign.slug" placeholder="請輸入標志" />
                </el-form-item>

                <el-form-item label="权限:" required style="align-items: flex-start; font-weight:bold">
                  <div style="display: flex;">
                    <el-checkbox v-model="checked" label="全选" size="large" @change="selectAllChange" />
                    <el-tree style="max-width: 600px;margin-top: 6px;margin-left: 10px;" :data="menu" show-checkbox node-key="id" :default-checked-keys="selectNode" @check="(e) => onCheck(e)" :props="defaultProps" ref="treeRef" />
                  </div>

                </el-form-item>

              </el-form>
              <div class="mt40 mb15 flex-cen ">
                <div class="align-center">
                  <el-button class="btn1" @click="reset()">重置</el-button>
                  <el-button class="btn2" @click="submit()">提交</el-button>
                </div>

              </div>
            </div>


          </div>
        </el-col>


      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'
import { useRouter } from 'vue-router';
import type { FormProps } from 'element-plus'
import { menuList } from '@/api/user.js'
import { roleAdd } from '@/api/systemAdmin.js'

onMounted(() => {
  getMenuList()
})
const onCheck = (e) => {
  console.log(toRaw(e))
  let checkedArr = treeRef.value.getCheckedNodes()
  console.log(checkedArr.length)
  if (checkedArr.length == idList.value.length) {
    checked.value = true
    console.log('全选')
  } else {
    checked.value = false
    console.log('未全选')
  }

}
const idList = ref([])
const menu = ref([])

const treeRef = ref(null)
const selectNode = ref([])
const selectAllChange = () => {
  console.log(checked.value)
  if (checked.value) {
    selectNode.value = menu.value.map(item => { return item.id })
    treeRef.value.setCheckedNodes(selectNode)
  }
  if (checked.value == false) {
    selectNode.value = []
    treeRef.value.setCheckedNodes([])
  }
}
const checked = ref(true)

/* const getNode = (parent_id) => {
  return menu.filter((item) => item.parent_id == parent_id)
} */
const getMenuList = () => {
  menuList().then((res) => {
    console.log('菜单列表', res)
    menu.value = res.data
    selectNode.value = menu.value.map(item => { return item.id })
    menu.value.forEach(element => {
      idList.value.push(element.id)
      if (element.children.length) {
        element.children.forEach(item => {
          idList.value.push(item.id)
        })
      }
    });
    // console.log(idList.value)
  })
}
const defaultProps = {
  children: 'children',
  label: 'title',
}
const labelPosition = ref<FormProps['labelPosition']>('right')

const formLabelAlign = reactive({
  name: '',
  slug: ''

})


const submit = () => {
  let select = treeRef.value.getCheckedNodes()
  let idArr = select.map(item => { return item.id })
  // console.log(treeRef.value.getCheckedNodes())
  let idStr = idArr.join(',')
  console.log(idArr)
  // return
  roleAdd({
    name: formLabelAlign.name,
    slug: formLabelAlign.slug,
    menu_ids: idStr
  }).then(() => {
    back()
  })
}
const reset = () => {
  formLabelAlign.name = ''
  formLabelAlign.slug = ''

}
const router = useRouter()
const back = () => {
  router.back()
}
</script>
<style scoped >
:deep(.el-upload--picture-card) {
  background-color: transparent;
  border: none;
  width: auto;
}

:deep(.el-input) {
  box-shadow: none;
}

:deep(.el-checkbox.el-checkbox--large .el-checkbox__label) {
  font-weight: bold;
}

:deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
  color: #606266;
}

:deep(.el-tree__empty-text) {
  top: 0%;
  width: 100px;
  transform: translate(0%, 0%);
}
</style>